<template>
  <div style="height:100%;">
    <a-card :bordered="false"   title="活动模板" :bodyStyle="{'padding':'10px 16px'}" style="min-height:95%;">
      <a-spin :spinning="loading">
        <!-- <span style="color:#999;margin:10px 10px 15px;">类型：</span>
        <a-radio-group default-value="a" button-style="solid" class="templateStoreHouse">
        <a-radio-button value="a">全部</a-radio-button>
        <a-radio-button value="b">微传单</a-radio-button>
        <a-radio-button value="c">群接龙</a-radio-button>
        <a-radio-button value="d">抽奖</a-radio-button>
        </a-radio-group>-->
        <div class="template">
          <!-- <div class="areaTitle">当月推荐</div> -->
          <div class="modules">
            <!-- 循环体 -->
            <div class="eachOne" v-for="(item,index) in list" :key="index">
              <div class="noHover">
                <div class="picArea">
                  <img :src="item.cover" alt />
                </div>
                <div class="operation">
                  <div class="title">
                    <span class="titleImg">
                      <img src="~@/assets/img/file.png" alt="推荐" />
                    </span>
                    <span class="titleTxt">{{item.title}}</span>
                  </div>
                  <div class="tags">
                    <a-tag color="blue">{{item.cate_name}}</a-tag>
                    <a-tag color="pink" v-for="(i,k) in item.scenes" :key="k">{{i}}</a-tag>
                  </div>
                  <!-- <div class="count">
                    <span>
                      发布
                      <span style="color:#000;font-weight: bolder;">0</span>
                    </span>
                    <a-divider type="vertical" />
                    <span>
                      最高招生
                      <span style="color:#000;font-weight: bolder;">0</span>
                    </span>
                  </div>-->
                </div>
                <div class="support-pay"></div>
              </div>
              <div class="hover">
                <div class="picArea" v-if="item.cate == 'lottery' || item.cate == 'vote'">
                  <vue-qr
                    :text="hostUrl+`/h5/#/pagesRecruit/otherTemplates/otherTemplates?sid=`+$store.state.user.school+`&type=` +item.cate +`&tid=` +item.id+`&operation=create`"
                    :size="100"
                    :margin="8"
                  ></vue-qr>
                  <div class="easyMake">扫一扫轻松制作</div>
                </div>
                <div class="picArea" v-else>
                  <vue-qr
                    :text="hostUrl+`/h5/#/pagesRecruit/templates/templates?sid=`+$store.state.user.school+`&type=` +item.cate +`&tid=` +item.id+`&operation=create`"
                    :size="100"
                    :margin="8"
                  ></vue-qr>
                  <div class="easyMake">扫一扫轻松制作</div>
                </div>
                <div class="operation">
                  <div class="desc">试试网页端制作活动，也很快哦！</div>
                  <a-button type="primary" style="margin-top:8px;" @click="makeTemplate(item)">立即制作</a-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-spin>
      <look-active ref="active" @reload="reload"></look-active>
    </a-card>
  </div>
</template>

<script>
import { templateBase } from '@/api/activity'
import QRCode from 'qrcodejs2'
import vueQr from 'vue-qr'
import lookActive from '@/components/activity'
import { Empty } from 'ant-design-vue'
import es from 'ant-design-vue/es'
export default {
  components: {
    lookActive,
    vueQr,
  },
  data() {
    return { 
      loading: false,
      list: [],
      hostUrl:null,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    }
  },
  created() {
    if(process.env.NODE_ENV === "development"){
      this.hostUrl='http://192.168.3.147:8080'
    }else{
      let ishttps = 'https:' == document.location.protocol ? true : false
      if (ishttps) {
        this.hostUrl = 'https://' + window.location.host
      } else {
        this.hostUrl = 'http://' + window.location.host
      }
    }
    this.reload()
  },
  methods: {
    reload() {
      this.loading = true
      templateBase()
        .then((res) => {
          let arr = []
          res.forEach(val=>{
            for(let i in val){
              let param = JSON.parse(JSON.stringify(val[i]))
              param.id = i
              arr.push(param)
            }
          })
          // console.log(arr)
          this.list = arr
        })
        .finally(() => {
          this.loading = false
        })
    },
    makeTemplate(data) {
      this.$refs.active.showModel(data, 'create')
    },
  },
}
</script>

<style lang="less">
.templateStoreHouse {
  .ant-radio-button-wrapper {
    border: none !important;
    border-radius: 2px !important;
    margin: 0 5px;
  }
  .ant-radio-button-wrapper:not(:first-child)::before {
    width: 0 !important;
  }
}
</style>
<style lang="less" scoped>
.template {
  padding: 8px;
  .areaTitle {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .modules {
    display: flex;
    .eachOne {
      width: 200px;
      height: 312px;
      border-radius: 6px;
      background-color: #fff;
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
      cursor: pointer;
      margin-right:20px;
      .noHover {
        // display: block;
        .picArea {
          border-radius: 6px 6px 0 0;
          width: 200px;
          height: 200px;
          overflow: hidden;
          img {
            width: 200px;
            height: 200px;
            object-fit: cover;
          }
        }
        .operation {
          padding: 16px;
          .title {
            .titleImg {
              width: 16px;
              height: 18px;
              display: inline-block;
              img {
                width: 16px;
                height: 18px;
              }
            }
            .titleTxt {
              color: #333;
              font-size: 16px;
              font-weight: 500;
              width: 144px;
              padding-left: 10px;
              max-width: 144px;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: inline-block;
              vertical-align: middle;
            }
          }
          .tags {
            margin-top: 8px;
            height: 48px;
            overflow: hidden;
            span {
              margin-bottom: 4px;
              margin-right: 8px;
            }
          }
          .count {
            margin-top: 8px;
            color: #ccc;
          }
        }
      }
      .hover {
        display: none;
        .picArea {
          width: 200px;
          height: 200px;
          background: rgba(0, 0, 0, 0.7);
          border-radius: 6px 6px 0 0;
          img {
            width: 124px;
            height: 124px;
            margin: 30px 38px;
            margin-bottom: 5px;
          }
          .easyMake {
            font-size: 14px;
            color: #fff;
            text-align: center;
          }
        }
        .operation {
          padding: 16px;
          text-align: center;
          .desc {
            font-size: 11px;
            color: #999;
            text-align: left;
            padding: 0 12px;
          }
        }
      }
    }
    .eachOne:hover {
      .noHover {
        display: none;
      }
      .hover {
        display: block;
      }
    }
  }
}
</style>